import React from 'react';
import classNames from 'classnames';
import Icon from '../Icon';
import styles from  './index.less';

export interface BoardProps {
  className?: string;
  text?: string;
  amount?: number;
  color?: string;
  icon?: string;
  spin?: boolean;
  style?: React.CSSProperties;
}

const Board: React.FC<BoardProps> = (props) => {
  const {
    className,
    text,
    amount,
    color,
    icon,
    spin,
    ...restProps
  } = props;

  const classString = classNames('board-wrapper', className);
  return (
    <div className={styles[`${classString}`]} style={{ backgroundColor: color || '#fff' }} {...restProps}>
      {
        props.children ? props.children : (
          <>
            {
              icon && (
                <div style={{
                  position: 'absolute',
                  top: '50%',
                  left: '50%',
                  transform: 'translate(-50%, -50%)',
                  height: '144px',
                  width: '144px'
                }}>
                  <Icon type={icon} spin={spin} style={{ fontSize: '144px', opacity: 0.2, display: 'inline-block' }} />
                </div>
              )
            }
            <div className={styles.text}>{text}</div>
            <div className={styles.number}>{amount}</div>
          </>
        )
      }
    </div>
  )
};

export default Board;
